import ReactDOM from 'react-dom';
import React, { useState, useEffect } from 'react';
import { Table, Breadcrumb, Layout, Menu } from 'antd';
import type { TableColumnsType } from 'antd';
import './index.scss';

const { Header, Content, Footer } = Layout;

interface DataType {
  mname: string;
  mid: string|number;
  mtype: string|number;
  status: number;
  business: string;
  lastupdate: string;
  lastoperator: string;
}

Date.prototype.Format = function (fmt: string) {
  var o = {
  "M+": this.getMonth() + 1, //月份
  "d+": this.getDate(), //日
  "H+": this.getHours(), //小时
  "m+": this.getMinutes(), //分
  "s+": this.getSeconds(), //秒
  "q+": Math.floor((this.getMonth() + 3) / 3), //季度
  "S": this.getMilliseconds() //毫秒
  };
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
  if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
}

const items = [
  {navName: '首页'}, 
  {navName: '模板中心'}, 
  {navName: '资源管理'}
].map(({ navName }, index) => ({
  key: index + 1,
  label: navName,
}));

const columns: TableColumnsType<DataType> = [
  { title: '模块名字', width: 30, dataIndex: 'mname', key: 'mname', fixed: 'left' },
  { title: '模块id', width: 20, dataIndex: 'mid', key: 'mid' },
  { title: '模块类型', width: 30, dataIndex: 'mtype', key: 'mtype' },
  { title: '发布状态', width: 30, dataIndex: 'status', key: 'status' },
  { title: '业务归属', width: 30, dataIndex: 'business', key: 'business' },
  { title: '最后修改时间', width: 40, dataIndex: 'lastupdate', key: 'lastupdate' },
  { title: '最后修改人', width: 40, dataIndex: 'lastoperator', key: 'lastoperator' },
  { title: '操作', width: 60, key: 'operations', fixed: 'right', 
    render: ({mid}) => (<div className="list-operates-container">
      <a href={`/creator.html?mid=${mid}`}>搭建</a>
      <a href="javascript:alert('暂未实现，敬请期待');">查看日志</a> 
    </div>)
  },
];

const PageHome = () => {
  const [moduleData, setModuleData] = useState(undefined) as any;

  useEffect(() => {
    const data: DataType[] = [];
    for (let i = 0; i < 90; i++) {
      data.push({
        mid: i + 1,
        mname: `模块-${i}`,
        mtype: 'common',
        status: 1,
        business: 'novel',
        lastupdate: `${new Date().Format("yyyy-MM-dd HH:mm")}`,
        lastoperator: '北漂程序员狮子',
      });
    }
    setModuleData(data);
  }, []);
  
  return (
    <Layout>
      <Header style={{ display: 'flex', alignItems: 'center', background: '#fff' }}>
        <Menu
          mode="horizontal"
          defaultSelectedKeys={['1']}
          items={items}
          style={{ flex: 1, minWidth: 0 }}
        />
      </Header>
      <Content style={{ padding: '0 48px' }}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>首页</Breadcrumb.Item>
          <Breadcrumb.Item>模块管理</Breadcrumb.Item>
        </Breadcrumb>
        <div className="content-container">
          <Table columns={columns} dataSource={moduleData} scroll={{ x: 1500, y: 500 }} />
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©{new Date().getFullYear()} Created by Ant UED
      </Footer>
    </Layout>
  ); 
};

ReactDOM.render(<PageHome />, document.getElementById('lowcode-home-container'));
